<!DOCTYPE html>
<html>
<head>
    <title>AI对话助手（Markdown支持版）</title>
    <!-- Markdown 渲染依赖 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <style>
        :root {
            --user-color: #1a73e8;
            --assistant-color: #0b8043;
        }
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f8f9fa;
        }
        .chat-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .message {
            margin: 15px 0;
            padding: 12px 16px;
            border-radius: 8px;
        }
        .user-message {
            background-color: #e8f0fe;
            border: 1px solid var(--user-color);
            margin-left: 30px;
        }
        .assistant-message {
            background-color: #e6f4ea;
            border: 1px solid var(--assistant-color);
            margin-right: 30px;
        }
        .role-label {
            font-weight: 500;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .role-label::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .user-message .role-label::before {
            background: var(--user-color);
        }
        .assistant-message .role-label::before {
            background: var(--assistant-color);
        }
        form {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        button {
            padding: 12px 24px;
            background-color: var(--user-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover {
            background-color: #1557b0;
        }
        .markdown-body pre {
            padding: 16px;
            border-radius: 8px;
            overflow-x: auto;
        }
        .reasoning-box {
            margin-top: 12px;
            padding: 12px;
            background: #fff8e5;
            border-left: 4px solid #ffd700;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <h1 style="color: var(--user-color); text-align: center;">AI对话助手</h1>

        <div class="messages">
            {% for message in messages %}
                <div class="message {% if message.role == 'user' %}user-message{% else %}assistant-message{% endif %}">
                    <div class="role-label">
                        {% if message.role == 'user' %}
                            👤 用户
                        {% else %}
                            🤖 助手
                        {% endif %}
                    </div>
                    <!-- Markdown 内容容器 -->
                    <div class="markdown-body"
                         data-markdown="{{ message.content|escape }}"
                         data-raw="{{ message.content|escape }}">
                        {{ message.content|safe }}
                    </div>

                    {% if message.reasoning %}
                    <div class="reasoning-box">
                        <div class="reasoning-label">💡 思考过程</div>
                        <div class="markdown-body"
                             data-markdown="{{ message.reasoning|escape }}"
                             data-raw="{{ message.reasoning|escape }}">
                            {{ message.reasoning|safe }}
                        </div>
                    </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <form method="post">
            {% csrf_token %}
            <input type="text" name="message" placeholder="请输入您的问题..." required autofocus>
            <button type="submit">发送</button>
        </form>
    </div>

    <!-- 依赖库 -->
    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

    <script>
        // 初始化配置
        marked.setOptions({
            breaks: true,
            highlight: (code, lang) => {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, { language }).value;
            }
        });

        // Markdown 渲染函数
        const renderMarkdown = () => {
            document.querySelectorAll('.markdown-body').forEach(container => {
                try {
                    // 优先使用 data-markdown 属性
                    const raw = container.dataset.markdown || container.dataset.raw;
                    const clean = DOMPurify.sanitize(raw, {
                        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'code', 'pre', 'blockquote',
                                     'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'a', 'p', 'br', 'hr'],
                        ALLOWED_ATTR: ['href', 'target']
                    });
                    container.innerHTML = marked.parse(clean);
                } catch (e) {
                    console.error('Markdown渲染失败:', e);
                    container.innerHTML = container.dataset.raw;
                }
            });

            // 触发代码高亮
            hljs.highlightAll();
        };

        // 确保依赖加载完成后执行
        const checkDependencies = () => {
            if (window.marked && window.DOMPurify && window.hljs) {
                renderMarkdown();
            } else {
                setTimeout(checkDependencies, 100);
            }
        };

        // 启动渲染流程
        document.addEventListener('DOMContentLoaded', checkDependencies);
    </script>
</body>
</html>